<style type="text/css">
    .page-header .left {
        width: calc(100% - 220px);
    }

    @media only screen and (max-width: 479px) and (min-width: 320px) {
        .page-header .left {
            width: 100%;
        }
    }
</style>
<div id="content">
    <div class="row s_page_title">
        <sa-big-breadcrumbs [items]="['运维管理[环卫]','故障问题明细']" icon="fa fa-newspaper-o"
            class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
    </div>
    <sa-widgets-grid>
        <div class="s_table">
            <div sa-widget [editbutton]="false" color="darken" class="clearfix">
                <header><span class="widget-icon"> <i class="fa fa-table"></i> </span>
                    <h2>故障问题明细</h2>
                </header>
                <div>
                    <div class="widget-body no-padding">
                        <div class="page-header clearfix s_table_opreation">
                            <div class="left page-header-btn">
                                <sa-company-tree-car companyTreeId="ProblemcompanyTree"
                                    tcarNumberSelect2="ProblemCarNumberSelect2" wrapId="content" [isShowCarSort]="false"
                                    sourceCarUrl="carInfo/queryCarNumber.html" typeFlag="2" [isShowCarNum]="true"
                                    (companySelected)="companySelected($event)" [companyData]="inputCompanyTreeCarData">
                                </sa-company-tree-car>
                                <!-- 暂留设备ID -->
                                <!-- <div class="top_module" style="min-width: 140px;border: 1px solid #ccc;border-radius: 4px;overflow: hidden;">
									<span class="module_text" style="display: inline-block;width: 62px;vertical-align: top;border-radius: 0;">设备ID</span>
									<input class="form-control" [(ngModel)]='deviceId'  type="text" disabled onfocus="this.blur()" placeholder="" style="border:none;display: inline-block;width:148px;height: 26px;"/>
								</div> -->
                                <!-- <div class="top_module">
                                    <span class="module_text">故障类型</span>
                                    <select class="module_inp" name="questionType" id="questionType" [(ngModel)]="questionType">
                                        <option value="">全部</option>
                                        <option value="1">传感器问题</option>
                                        <option value="2">GPS问题</option>
                                    </select>
                                </div> -->
                                <div class="top_module" *ngIf="questionType === '3'">
                                    <span class="module_text">问题类型</span>
                                    <select class="module_inp" name="sanitationQuestionType" id="sanitationQuestionType"
                                        [(ngModel)]="sanitationQuestionType">
                                        <option value="">全部</option>
                                        <option *ngFor="let item of sanitationQuestionEnum" [value]="item.value">
                                            {{item.label}}</option>
                                    </select>
                                </div>
                                <div class="selectDate top_module">
                                    <table-select-date [notInit]='true' [specifyId]='specifyId2'
                                        [specifyTime]='specifyTime2' (outerTime)="getSelectTableTime($event)">
                                    </table-select-date>
                                </div>
                                <button class="btn btn-primary" (click)="table_search()">查询</button>
                                <button class="btn btn-primary" type="button" (click)="exportData()">导出</button>
                            </div>
                            <div class="right top-search">
                                <input type="text" [(ngModel)]="searchKey" (change)="table_search()"
                                    class="search-input" placeholder="设备ID、车牌号">
                                <span class="top-search-box">
                                    <button class="top-search-btn" type="button" (click)="table_search()"> <i
                                            class="fa fa-search"></i></button>
                                </span>
                            </div>
                        </div>
                        <div class="tabbable">
                            <ul class="nav nav-tabs" id="myTab"
                                style="padding-left:12px;background-image: linear-gradient(#F1F5FD, #E9F0FF);">
                                <li class="active s-lis"><a data-toggle="tab" href="#sensor"
                                        (click)="tabChange('1');">传感器问题</a></li>
                                <li class="s-lis"><a data-toggle="tab" href="#GPS" (click)="tabChange('2');">GPS问题</a>
                                </li>
                                <li class="s-lis"><a data-toggle="tab" href="#environment"
                                        (click)="tabChange('3');">环卫问题</a></li>
                            </ul>
                            <div class="tab-content" style="padding:0;border:none">
                                <div id="sensor" class="tab-pane active">
                                    <div class="table_scroll">
                                        <table
                                            class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
                                            <thead>
                                                <tr>
                                                    <th>设备ID</th>
                                                    <th>车牌号码</th>
                                                    <th>公司名称</th>
                                                    <th>车辆录入时间</th>
                                                    <th>传感器问题</th>
                                                    <th>操作</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr *ngFor="let row of tableData">
                                                    <td>{{row.deviceId}}</td>
                                                    <td>{{row.carNumber}}</td>
                                                    <td>{{row.parentName}}</td>
                                                    <td>{{row.inputDate}}</td>
                                                    <td>
                                                        <div
                                                            *ngIf="row.sensorProblemList&& row.sensorProblemList.length > 0">
                                                            <span
                                                                *ngFor="let item of row.sensorProblemList,let i = index">{{item.sensorProblem}}<span
                                                                    *ngIf="i < row.sensorProblemList.length - 1">,</span></span>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <button type="button"
                                                            (click)="showDetailModal(row,analyseMangeModal)">查看详情</button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="table-fix clearfix">
                                        <paginator [totalRecords]="totalCount" [rows]="pageSize"
                                            [currentPage]="curPage - 1" (onPageChange)="paginate($event)">
                                        </paginator>
                                        <button type="button" class="btn default refresh_btn" (click)="refresh()"><i
                                                class="fa fa-refresh"></i></button>
                                    </div>
                                </div>
                                <div id="GPS" class="tab-pane">
                                    <div class="table_scroll">

                                        <table
                                            class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
                                            <thead>
                                                <tr>
                                                    <th>设备ID</th>
                                                    <th>车牌号码</th>
                                                    <th>公司名称</th>
                                                    <th>GPS问题</th>
                                                    <th>操作</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr *ngFor="let row of tableData">
                                                    <td>{{row.deviceId}}</td>
                                                    <td>{{row.carNumber}}</td>
                                                    <td>{{row.parentName}}</td>
                                                    <td>
                                                        <div
                                                            *ngIf="row.gpsProblemEntity&& row.gpsProblemEntity.gpsProblem">
                                                            <span>{{row.gpsProblemEntity.gpsProblem}}</span>
                                                        </div>
                                                    </td>
                                                    <td>

                                                        <button type="button"
                                                            (click)="showDetailModal(row,analyseMangeModal)">查看详情</button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="table-fix clearfix">
                                        <paginator [totalRecords]="totalCount" [rows]="pageSize"
                                            [currentPage]="curPage - 1" (onPageChange)="paginate($event)">
                                        </paginator>
                                        <button type="button" class="btn default refresh_btn" (click)="refresh()"><i
                                                class="fa fa-refresh"></i></button>
                                    </div>
                                </div>
                                <div id="environment" class="tab-pane">
                                    <div class="table_scroll">

                                        <table
                                            class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
                                            <thead>
                                                <tr>
                                                    <th>设备ID</th>
                                                    <th>车牌号码</th>
                                                    <th>公司名称</th>
                                                    <th>异常开始时间</th>
                                                    <th>异常结束时间</th>
                                                    <th>问题描述</th>
                                                    <th>更新时间</th>
                                                    <th>操作</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr *ngFor="let row of tableData">
                                                    <td>{{row.deviceId}}</td>
                                                    <td>{{row.carNumber}}</td>
                                                    <td>{{row.parentName}}</td>
                                                    <td>{{row.sanitationProblemEntity?row.sanitationProblemEntity.startTime:''}}
                                                    </td>
                                                    <td>{{row.sanitationProblemEntity?row.sanitationProblemEntity.endTime:''}}
                                                    </td>
                                                    <td>
                                                        <span
                                                            *ngIf='row.sanitationProblemEntity && row.sanitationProblemEntity.problem.length >0'>
                                                            <span
                                                                *ngFor="let lis of row.sanitationProblemEntity.problem;let i = index;">
                                                                <span>{{lis}}<span
                                                                        *ngIf="i < row.sanitationProblemEntity.problem.length-1">,</span></span>
                                                            </span>
                                                        </span>
                                                    </td>
                                                    <td>{{row.updateDate}}</td>
                                                    <td>
                                                        <button type="button"
                                                            (click)="showDetailModal(row,analyseMangeModal)">查看详情</button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="table-fix clearfix">
                                        <paginator [totalRecords]="totalCount" [rows]="pageSize"
                                            [currentPage]="curPage - 1" (onPageChange)="paginate($event)">
                                        </paginator>
                                        <button type="button" class="btn default refresh_btn" (click)="refresh()"><i
                                                class="fa fa-refresh"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </sa-widgets-grid>

</div>
<!-- 查看回复详情   弹窗-->
<section bsModal #analyseMangeModal="bs-modal" class="modal fade" role="dialog" tabindex="-1"
    aria-labelledby="myLargeModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"
    id="detailListModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" (click)="itemModalClose(analyseMangeModal)" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">故障详情</h4>
            </div>
            <div class="modal-body">
                <div class="row form-horizontal">
                    <div class="table_scroll" *ngIf="faultmList.length != 0">
                        <div class="title" style="font-size: 15px;margin-bottom: 10px;" [ngSwitch]="questionType">
                            <span *ngSwitchCase="1">
                                传感器详细问题
                            </span>
                            <span *ngSwitchCase="2">
                                GPS详细问题
                            </span>
                            <span *ngSwitchDefault>
                                环卫详细问题
                            </span>
                        </div>
                        <table
                            class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
                            <thead>
                                <tr>
                                    <th>问题描述</th>
                                    <th>开始时间</th>
                                    <th>结束时间</th>
                                    <th *ngIf="questionType == '3'">操作时间</th>
                                    <th *ngIf="questionType == '3'">操作人</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr *ngFor="let row of faultmList">
                                    <td [ngSwitch]="questionType">
                                        <span *ngSwitchCase="1">
                                            {{row.sensorProblem}}
                                        </span>
                                        <span *ngSwitchCase="2">
                                            {{row.gpsProblem}}
                                        </span>
                                        <span *ngSwitchDefault>
                                            <span *ngIf='row.problem.length >0'>
                                                <span *ngFor="let lis of row.problem;let i = index;">
                                                    <span>{{lis}}<span *ngIf="i < row.problem.length-1">,</span></span>
                                                </span>
                                            </span>
                                        </span>
                                    </td>
                                    <td>{{row.startTime}}</td>
                                    <td>{{row.endTime}}</td>
                                    <td *ngIf="questionType == '3'">{{row.operatingTime}}</td>
                                    <td *ngIf="questionType == '3'">{{row.operator}}</td>
                                    <td>
                                        <button type="button"
                                            (click)="showDataModal(row,analyseMangeModal)">分析处理</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- 查看回复详情 弹窗end-->

<!-- 数据分析处理   弹窗-->
<div id="analyseModal">

    <div class="modal-dialog modal-lg" style="width: 1400px;margin: 0;">
        <div class="modal-content">
            <div class="modal-header" id="analyseModalheadDrag">
                <button type="button" class="close" (click)="cancelAnalyseModal()" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">数据分析处理</h4>
            </div>
            <div class="modal-body" style="padding: 0;background-color: #ffffff;">
                <sa-problem-analyse #analyseComponent [isShowTitle]="false" [dayNum]="3"></sa-problem-analyse>
            </div>
        </div>
    </div>


    <div style="position: absolute;right: 1px; bottom: 1px;width: 30px;height: 24px;">
        <button class="dragBtn btn btn-primary" id='dragArrow' title="拖拽改变弹窗宽度"> ↔ </button>
    </div>
</div>
<!-- 数据分析处理 END -->